<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<%-- 在IE运行最新的渲染模式 --%>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<%-- 初始化移动浏览显示 --%>
		<meta name="Author" content="Dreamer-1.">
		<script type="text/javascript" src="js/echarts.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/axios.js"></script>
		<script src="js/qs.js"></script>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" type="text/css" href="../css/homepage/public.css" />
		<script type="text/javascript" src="/js/jquery.min.js"></script>
		<script type="text/javascript" src="/js/public.js"></script>
		<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
		<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<style>
			.el-header,
			.el-footer {
				width: 100%;
			}
			
			.el-aside {
				background-color: #f2f2f2;
			}
		
			.el-main {
				margin: 0;
				padding: 0;
			}
			.indexL {
				width: 100%;
				height: auto;
				/* display: flex;
				align-items: center;
				justify-content: center; */
			}
			
			.indexBn {
				width: 100%;
				height: auto;
			}
		</style>


		<title>- 后台管理系统 -</title>
	</head>

	<body style="margin: 0;">
		<div id="maxapp">
			<el-container>
				<el-header style="height: 100px;padding: 0;">
					<!-- 头部 -->
					<div class="head" style="margin: 0;">
						<div class="headL">
							<h3 class="headLogo">CRM客户关系管理系统</h3>
						</div>
						<div class="headR">
							<p class="p1" style="line-height: 30px;">
								<div style="float: right; margin-top: 40px; color: #FFFFFF;">
									<span style="font-size: 18px;">${user.uName}</span> 
									<a href="/login/log" style="color: #FFFFFF;  margin-left: 5px; font-size: 12px;" target="_top" class="goOut">退出</a>
								</div>
								<div style="float: right; margin-top: 30px; margin-right: 10px;"><img style="width:50px;height: 50px;  border-radius: 50%;" src="${user.uHeadimg}" /></div>
							</p>
						</div>
					</div>

					<div class="closeOut">
						<div class="coDiv">
							<p class="p1">
								<span>X</span>
							</p>
							<p class="p2">确定退出当前用户？</p>
							<P class="p3">
								<a class="ok yes" href="#">确定</a><a class="ok no" href="#">取消</a>
							</p>
						</div>
					</div>
				</el-header>
				<el-container>
					<el-aside width="220px">
							<!-- 左边节点 -->
						<div class="container">
							<div class="leftsidebar_box" style="font-size: 14px;">
								<dl class="system_log"  v-for="(value, key, index) in menus" >
									 <dt>
										<img class="icon1" :src="value.map.pIcon" /><img
											class="icon2" :src="value.map.pIcon" />&nbsp;{{value.map.pName}}<img
											class="icon3" src="../imgs/homepage/img/coin19.png" /><img
											class="icon4" src="../imgs/homepage/img/coin20.png" />
									</dt>
									<dd v-for="(value1, key, index) in value.mapList">
										<img class="coin11" src="../imgs/homepage/img/coin111.png" /><img
											class="coin22" src="../imgs/homepage/img/coin222.png" /><!-- @click="showUrl(value1.pUrl) -->
											<input id="inpUrl" type="hidden" v-model="value1.pUrl"></input>
											<a class="cks"  :href="'#'+value1.pUrl"  onclick="showAtRight(this)">{{value1.pName}}</a>
											<img class="icon5"
											src="../imgs/homepage/img/coin21.png" />
									</dd>
								</dl>
								<dl class="system_log"> 
									<dt>
										<img class="icon1" src="../imgs/homepage/img/coin15.png" /><img
											class="icon2" src="../imgs/homepage/img/coin16.png" />&nbsp;系统管理<img
											class="icon3" src="../imgs/homepage/img/coin19.png" /><img
											class="icon4" src="../imgs/homepage/img/coin20.png" />
									</dt>
									<dd>
										<img class="coin11" src="../imgs/homepage/img/coin111.png" /><img
											class="coin22" src="../imgs/homepage/img/coin222.png" />
											<a class="cks" href="#/authority/personalSettings" onclick="showAtRight('/authority/personalSettings')">个人设置</a>
											<img
											class="icon5" src="../imgs/homepage/img/coin21.png" />
									</dd>
									<dd>
										<img class="coin11" src="../imgs/homepage/img/coin111.png" /><img
											class="coin22" src="../imgs/homepage/img/coin222.png" /><a
											href="/login/log" target="_top" class="cks">退出</a><img
											class="icon5" src="../imgs/homepage/img/coin21.png" />
									</dd>
								</dl>
							</div>
						</div>
					</el-aside>
					<el-main>
						<div id="content">
							<div id="pageAll">
								<div class="page">
									<!-- main页面样式 -->
									<div class="indexL">
										<!-- <img class="indexBn" src="../imgs/homepage/img/indexBanner.png" /><br> -->
										<div id="tableFrom" style="width: 100%;height:360px;margin: 0 auto;margin-top:3%;">
											<div id="dateNum" style="float: left;;width: 35%;height:350px;margin-left: 3%;">
											</div>
											<div id="barAndLine" style="width: 57%;height: 360px;float: right;margin-right: 2%;"></div>
										</div>
										<div style="width: 100%;height:400px;margin-top: 2%;">
											<div id="tableDown" style="float: left;width: 40%;height:400px;margin: 0 auto;margin-top:2%;"></div>
											<div id="tableUp" style="float: left;width: 55%;height:400px;margin: 0 auto;margin-top:2%;"></div>
										</div>
									</div>
									<!-- main页面样式end -->
								</div>
							</div>
						</div>
					</el-main>
				</el-container>
			</el-container>
		</div>
		<script type="text/javascript">
			/*
			 * 对选中的标签激活active状态，对先前处于active状态但之后未被选中的标签取消active
			 * （实现左侧菜单中的标签点击后变色的效果）
			 */
			$(document).ready(function() {
				$('ul.nav > li').click(function(e) {
					//e.preventDefault();	加上这句则导航的<a>标签会失效
					$('ul.nav > li').removeClass('active');
					$(this).addClass('active');
				});
			});
		
			/*
			 * 解决ajax返回的页面中含有javascript的办法：
			 * 把xmlHttp.responseText中的脚本都抽取出来，不管AJAX加载的HTML包含多少个脚本块，我们对找出来的脚本块都调用eval方法执行它即可
			 */
			function executeScript(html) {
		
				var reg = /<script[^>]*>([^\x00]+)$/i;
				//对整段HTML片段按<\/script>拆分
				var htmlBlock = html.split("<\/script>");
				for (var i in htmlBlock) {
					var blocks; //匹配正则表达式的内容数组，blocks[1]就是真正的一段脚本内容，因为前面reg定义我们用了括号进行了捕获分组
					if (blocks = htmlBlock[i].match(reg)) {
						//清除可能存在的注释标记，对于注释结尾-->可以忽略处理，eval一样能正常工作
						var code = blocks[1].replace(/<!--/, '');
						try {
							eval(code) //执行脚本
						} catch (e) {}
					}
				}
			}
		
			/*
			 * 利用div实现左边点击右边显示的效果（以id="content"的div进行内容展示）
			 * 注意：
			 *   ①：js获取网页的地址，是根据当前网页来相对获取的，不会识别根目录；
			 *   ②：如果右边加载的内容显示页里面有css，必须放在主页（即例中的index.jsp）才起作用
			 *   （如果单纯的两个页面之间include，子页面的css和js在子页面是可以执行的。 主页面也可以调用子页面的js。但这时要考虑页面中js和渲染的先后顺序 ）
			 */
			function showAtRight(url) {
				var xmlHttp;
				var urlthis= url.toString().split('#');
				if(urlthis.length>1){
					url= urlthis[1];
				}
				if (window.XMLHttpRequest) {
					// code for IE7+, Firefox, Chrome, Opera, Safari
					xmlHttp = new XMLHttpRequest(); //创建 XMLHttpRequest对象
				} else {
					// code for IE6, IE5
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
		
				xmlHttp.onreadystatechange = function() {
					//onreadystatechange — 当readystate变化时调用后面的方法
		
					if (xmlHttp.readyState == 4) {
						//xmlHttp.readyState == 4	——	finished downloading response
		
						if (xmlHttp.status == 200) {
							//xmlHttp.status == 200		——	服务器反馈正常			
		
							document.getElementById("content").innerHTML = xmlHttp.responseText; //重设页面中id="content"的div里的内容
							executeScript(xmlHttp.responseText); //执行从服务器返回的页面内容里包含的JavaScript函数
						}
						//错误状态处理
						else if (xmlHttp.status == 404) {
							alert("出错了☹   （错误代码：404 Not Found），……！");
							/* 对404的处理 */
							return;
						} else if (xmlHttp.status == 403) {
							alert("出错了☹   （错误代码：403 Forbidden），……");
							/* 对403的处理  */
							return;
						} else {
							alert("出错了☹   （错误代码：" + request.status + "），……");
							/* 对出现了其他错误代码所示错误的处理   */
							return;
						}
					}
		
				}
		
				//把请求发送到服务器上的指定文件（url指向的文件）进行处理
				xmlHttp.open("GET", url, true); //true表示异步处理
				xmlHttp.send();
				
			}
		</script>
		<script>
			var s=${menus};

		document.cookie=${user.uId};

		var Max=new Vue({
				el: "#maxapp",
				data: {
					menus:s,
					pasSize:6,
					imgUrl: '${userp.uHeadimg}',
				},
				methods:{
				},
				mounted() {},
				mounted:function(){
					var url= window.location.href;

					var url1= url.indexOf("#");
					console.log("url:"+url1);
					console.log("url:"+window.location.href);
					if(url1!=-1){
						showAtRight(url.substring(url1+1,url.length));
					}
					
					this.imgurl='${user.uHeadimg}';
				}
			})
		
			new Vue().$mount('#maxapp');
		</script>
		<script id="infojs"></script>
		<script id="addjs"></script>
	</body>
	<script type="text/javascript">
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('dateNum'));
				optionDateNum= {
					title : {
						text: '今日数据统计'
					},
					tooltip : {
						trigger: 'axis'
					},
					color:'#CD5B45',
					/* legend: {
						data:['2011年', '2012年']
					}, */
					toolbox: {
						show : true,
						feature : {
							mark : {show: true},
							//dataView : {show: true, readOnly: false},
							magicType: {show: true, type: ['line', 'bar']},
							restore : {show: true},
							saveAsImage : {show: true}
						}
					},
					calculable : true,
					xAxis : [
						{
							type : 'value',
							boundaryGap : [0, 0.01]
						}
					],
					yAxis : [
						{
							type : 'category',
							data : ['投诉','关怀','订单','获客','访问']
						}
					],
					series : [
						{
							name:'今天',
							type:'bar',
							data:[${complaintNum},${careNum},${orderNum},${getcustNum},${loginNum}]
						}
					]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(optionDateNum);
				
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('barAndLine'));
				optionBarAndLine= {
					title : {
						text: '上一年度盈利图'
					},
					tooltip : {
						trigger: 'axis',
						axisPointer : {            // 坐标轴指示器，坐标轴触发有效
							type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					legend: {
						data:['利润', '支出', '收入']
					},
					toolbox: {
						show : true,
						feature : {
							mark : {show: true},
							//dataView : {show: true, readOnly: false},
							magicType : {show: true, type: ['line', 'bar']},
							restore : {show: true},
							saveAsImage : {show: true}
						}
					},
					calculable : true,
					xAxis : [
						{
							type : 'value'
						}
					],
					yAxis : [
						{
							type : 'category',
							axisTick : {show: false},
							data : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月','总计']
						}
					],
					series : [
						{
							name:'利润',
							type:'bar',
							itemStyle : { normal: {label : {show: true, position: 'inside'}}},
							data:[${yearProfile.one}, ${yearProfile.two}, ${yearProfile.three}, ${yearProfile.four}, ${yearProfile.five}, ${yearProfile.six}, ${yearProfile.seven},${yearProfile.eight}, ${yearProfile.nine}, ${yearProfile.ten}, ${yearProfile.ele}, ${yearProfile.twe},${yearProfile.sum}]
						},
						{
							name:'收入',
							type:'bar',
							stack: '总量',
							barWidth : 5,
							itemStyle: {normal: {
								label : {show: true}
							}},
							data:[${yearProfile.Sone}, ${yearProfile.Stwo}, ${yearProfile.Sthree}, ${yearProfile.Sfour}, ${yearProfile.Sfive}, ${yearProfile.Ssix}, ${yearProfile.Sseven},${yearProfile.Seight}, ${yearProfile.Snine}, ${yearProfile.Sten}, ${yearProfile.Sele}, ${yearProfile.Stwe},${yearProfile.Ssum}]
						},
						{
							name:'支出',
							type:'bar',
							stack: '总量',
							itemStyle: {normal: {
								label : {show: true, position: 'left'}
							}},
							data:['-${yearProfile.Zone}', '-${yearProfile.Ztwo}', '-${yearProfile.Zthree}', '-${yearProfile.Zfour}', '-${yearProfile.Zfive}', '-${yearProfile.Zsix}', '-${yearProfile.Zseven}','-${yearProfile.Zeight}', '-${yearProfile.Znine}', '-${yearProfile.Zten}', '-${yearProfile.Zele}', '-${yearProfile.Ztwe}','-${yearProfile.Zsum}']
						}
					]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(optionBarAndLine);
		
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('tableUp'));
				// 指定图表的配置项和数据
				optionUp = {
					title : {
							text: '售后统计',
							x:'center'
					},
					tooltip : {
							trigger: 'item',
							formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
							x : 'center',
							y : 'bottom',
							data:['待办任务','关怀','qa','投诉','维修工单']
					},
					toolbox: {
							show : true,
							feature : {
									mark : {show: true},
									//dataView : {show: true, readOnly: false},
									magicType : {
											show: true, 
											type: ['pie', 'funnel']
									},
									//restore : {show: true},
									saveAsImage : {show: true}
							}
					},
					calculable : true,
					series : [
							{
									name:'售后统计',
									type:'pie',
									radius : [30, 110],
									center : ['50%', 200],
									roseType : 'area',
									x: '50%',               // for funnel
									max: 40,                // for funnel
									sort : 'ascending',     // for funnel
									data:[
											{value:${allCount.alltaskNum}, name:'待办任务'},
											{value:${allCount.allcareNum}, name:'关怀'},
											{value:${allCount.allqaNum}, name:'qa'},
											{value:${allCount.allcomplainNum}, name:'投诉'},
											{value:${allCount.allrepairNum}, name:'维修工单'}
									]
							}
					]
			};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(optionUp);
				
				
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('tableDown'));
				// 指定图表的配置项和数据
				optionDown = {
					title : {
							text: '销售阶段跟踪',
							x:'center'
					},
					tooltip : {
							trigger: 'item',
							formatter: "{a} <br/>{b} : {c}%"
					},
					toolbox: {
							show : true,
							feature : {
									mark : {show: true},
									//dataView : {show: true, readOnly: false},
									//restore : {show: true},
									saveAsImage : {show: true}
							}
					},
					legend: {
							x : 'center',
							y : 'bottom',
							data : ['初期沟通','立项评估','需求分析','方案制定','招投标/竞争','商务谈判','合同签约']
					},
					calculable : true,
					series : [
							{
									name:'销售阶段跟踪',
									type:'funnel',
									width: '35%',
									x:'center',
									data:[
											{value:${allChance.one}, name:'初期沟通'},
											{value:${allChance.two}, name:'立项评估'},
											{value:${allChance.three}, name:'需求分析'},
											{value:${allChance.four}, name:'方案制定'},
											{value:${allChance.five}, name:'招投标/竞争'},
											{value:${allChance.six}, name:'商务谈判'},
											{value:${allChance.seven}, name:'合同签约'}
									]
							}
					]
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(optionDown);
		</script>
</html>
